<style lang="stylus" scoped>
.bookmarks-widgets {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #000000;
  transition: 0.2s;

  &:hover {
    background: #ffffff;
  }
}

svg {
  width: 32px;
  height: 32px;
  margin: 5px 0 10px;
  fill: #fff;
  mix-blend-mode: difference;

  &.small {
    margin: 0;
    width: 24px;
  }
}

.title {
  margin-bottom: 2px;
  line-height: 20px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  mix-blend-mode: difference;
}

.desc {
  line-height: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  mix-blend-mode: difference;
}
</style>
<template>
  <div class="bookmarks-widgets" @click="openModal">
    <v-mdi name="mdi-yin-yang" :class="{
      small: widgetsSize === BookmarkSize.small
    }" />
    <template v-if="widgetsSize !== BookmarkSize.small">
      <div class="title">
        六爻
      </div>
      <div class="desc">
        伏羲64卦
      </div>
    </template>

    <v-modal v-model="mainViewVisible" :width="340">
      <div style="padding: 20px">
        <LuckyWheel ref="myLucky" width="300px" height="300px" :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
      </div>
    </v-modal>

  </div>

</template>

<script lang="ts">
import { computed, ref } from 'vue';
import { Bookmark, BookmarkSize } from '@database/entity/bookmark';
export default {
  name: 'SixLines',
  props: {
    data: {
      type: Bookmark,
      default() {
        return new Bookmark({});
      },
    },
  },
  setup(props: { data: Bookmark }) {
    const myLucky = ref();

    const blocks = [{ padding: '10px', background: '#869cfa' }];
    const prizes = [] as any[];
    start();
    function start() {
      const gua = {
        乾为天: '1',
        坤为地: '2',
        水雷屯: '3',
        山水蒙: '4',
        水天需: '5',
        天水讼: '6',
        地水师: '7',
        水地比: '8',
        风天小畜: '9',
        天泽履: '10',
        地天泰: '11',
        天地否: '12',
        天火同人: '13',
        火天大有: '14',
        地山谦: '15',
        雷地豫: '16',
        泽雷随: '17',
        山风蛊: '18',
        地泽临: '19',
        风地观: '20',
        火雷噬嗑: '21',
        山火贲: '22',
        山地剥: '23',
        地雷复: '24',
        天雷无妄: '25',
        山天大畜: '26',
        山雷颐: '27',
        泽风大过: '28',
        坎为水: '29',
        离为火: '30',
        泽山咸: '31',
        雷风恒: '32',
        天山遁: '33',
        雷天大壮: '34',
        火地晋: '35',
        地火明夷: '36',
        风火家人: '37',
        火泽睽: '38',
        水山蹇: '39',
        雷水解: '40',
        山泽损: '41',
        风雷益: '42',
        泽天夬: '43',
        天风姤: '44',
        泽地萃: '45',
        地风升: '46',
        泽水困: '47',
        水风井: '48',
        泽火革: '49',
        火风鼎: '50',
        震为雷: '51',
        艮为山: '52',
        风山渐: '53',
        雷泽归妹: '54',
        雷火丰: '55',
        火山旅: '56',
        巽为风: '57',
        兑为泽: '58',
        风水涣: '59',
        水泽节: '60',
        风泽中孚: '61',
        雷山小过: '62',
        水火既济: '63',
        火水未济: '64',
        
      };

      for (const key in gua) {
        if (gua.hasOwnProperty(key)) {
          console.log(`Key: ${key}, Value: ${gua[key]}`);
          prizes.push({
            background: '#fff',
            fonts: [{ text: key, fontSize: '12px' }],
          });
        }
      }
    }

    const buttons = [
      { radius: '40%', background: '#617df2' },
      { radius: '35%', background: '#afc8ff' },
      {
        radius: '30%',
        background: '#869cfa',
        pointer: true,
        fonts: [{ text: '六爻', top: '-10px' }],
      },
    ];
    let nedx = 4;

    // 点击抽奖按钮会触发star回调
    function startCallback() {
      // 调用抽奖组件的play方法开始游戏
      myLucky.value.play();
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        nedx = Math.floor(Math.random() * 64) + 1;
        // 调用stop停止旋转并传递中奖索引
        const guaIndex = nedx - 1;
        myLucky.value.stop(guaIndex);
      }, 3000);
    }
    // 抽奖结束会触发end回调
    function endCallback(prize: any) {
      window.open('https://www.k366.com/gua/' + nedx + '.htm');
    }

    const widgetsSize = computed(() => props.data.size);
    const mainViewVisible = ref(false);
    return {
      blocks,
      prizes,
      buttons,
      myLucky,
      widgetsSize,
      BookmarkSize,
      mainViewVisible,
      startCallback,
      endCallback,
      openModal() {
        mainViewVisible.value = true;
      },
    };
  },
};
</script>
